<template>
  <div>
    <!-- 注册页面的头部 -->
    <van-nav-bar title="注册" left-arrow @click-left="$router.back()" />
    <!--  内容 -->

    <div class="login-page-logo">
      <img src="../assets/logo.png" alt="" />
    </div>
    <!-- 表单开始  -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="rules.username"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="rules.password"
      />
      <div style="margin: 16px">
        <van-button round block type="info" color="#DB281F" native-type="submit"
          >注册</van-button
        >
      </div>
    </van-form>

    <!-- 表单结束 -->
  </div>
</template>

<script>
import { Form, Field } from "vant";
import  rules from '@/common/validator'

export default {
  name: "reg",
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
  },
  data() {
    return {
      username: "",
      password: "",
      rules
    };
  },
  methods: {
    onSubmit(val) {
      // console.log(val);
      // let {username,password} = val;

      // console.log(username)
      // console.log(password)
      
       this.$http.post('/user/pub/register',val)
       .then(res=>{
           console.log(res)
           if(res.code==0){
             this.$toast('注册成功')
             let {token,tokenExpired,uid} = res;
            //  token  通行证   有过期时间  不受环境显示  网页 小程序 APP 都可以用来校验我们的身份   token应该保密
             //  数学计算的方式验证的  不太占用服务器的空间  
            //  tokenExpired  过期时间
            // uid  用户ID   身份证
              localStorage.setItem('xl-token',token)
              localStorage.setItem('xl-tokenExpired',tokenExpired)
              localStorage.setItem('xl-uid',uid)
              
           //  注册后 不用重新登
           setTimeout(v=>{
              this.$router.go(-2)
           },500)

          }else{
              this.$toast(res.msg||'注册失败')
           }


       })

    },
    // yanzheng(val) {

    //   return new Promise((v) => {
    //     setTimeout(() => {
    //       v(val > 20);
    //     }, 200);
    //   });

    // },


  },
};
</script>

<style lang="less">
// css预处理

.login-page-logo {
  width: 180px;
  height: 180px;
  margin: 50px auto 0;
  img {
    width: 180px;
  }
}
</style>